<template>
	<div id="app">
		<el-container style="height:100%;">
			<el-aside :width="asideWidth" style="background-color: #545c64" v-if="isShowNav" class="appBox">
				<el-menu class="el-menu-vertical-demo" :unique-opened="true" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse">
					<el-submenu index="1">
						<template slot="title"><i class="iconfont icon-yemian"></i>首页</template>
						<el-menu-item-group>
							<router-link to="/homeSwiper"><el-menu-item index="1-1">轮播图</el-menu-item></router-link>
							<router-link to="/homeAdver"><el-menu-item index="1-2">广告</el-menu-item></router-link>
							<router-link to="/homeMap"><el-menu-item index="1-3">地图</el-menu-item></router-link>
							<router-link to="/homeStrategy"><el-menu-item index="1-4">攻略</el-menu-item></router-link>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="iconfont icon-yuyue"></i>预约页</template>
						<el-menu-item-group>
							<router-link to="appointment1"><el-menu-item index="2-1">景区预约</el-menu-item></router-link>
							<router-link to="appointment2"><el-menu-item index="2-2">酒店预约</el-menu-item></router-link>
							<router-link to="appointment3"><el-menu-item index="2-3">美食预约</el-menu-item></router-link>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title"><i class="iconfont icon-wenzhang"></i>文章页</template>
						<el-menu-item-group>
							<router-link to="/article"><el-menu-item index="3-1">文章列表</el-menu-item></router-link>
							<router-link to="/article_turn"><el-menu-item index="3-2">轮播图</el-menu-item></router-link>
						</el-menu-item-group>
					</el-submenu>
					<router-link to="/strategy"><el-menu-item index="4"><i class="iconfont icon-gonglve"></i>攻略景点</el-menu-item></router-link>
					<router-link to="/dynamic"><el-menu-item index="5"><i class="iconfont icon-dongtai"></i>动态列表</el-menu-item></router-link>
					<router-link to="/takeJob"><el-menu-item index="6"><i class="iconfont icon-zhaopin"></i>招聘列表</el-menu-item></router-link>
				</el-menu>
			</el-aside>
		
			<el-container>
				<el-header style="height:50px;font-size: 14px;" v-if="isShowNav">
					<div class="showMenu" @click="showMenu"><i class="iconfont icon-caidan1"></i></div>
					<div class="outLogin" @click="outLogin">退出登录</div>
					<el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 50px;">
						<el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
						<el-breadcrumb-item v-if="activeTitle">{{activeTitle}}</el-breadcrumb-item>
					</el-breadcrumb>
				</el-header>
		
		<transition name="transCjj">
    		<router-view/>
   	 	</transition>
			</el-container>
		</el-container>
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				isShowNav:true,
				isCollapse:false,
				asideWidth:"220px",
				activeTitle:""
			}
		},
		methods:{
			showMenu(){
				this.isCollapse = !this.isCollapse;
				if(this.isCollapse){
					this.asideWidth = "56px";
				}else{
					this.asideWidth = "220px";
				}
			},
			outLogin(){
				//清除token
            	this.$store.dispatch("setTokenStatus",{
					token:""
				})
            	console.log(this.$store.state.token);
            	sessionStorage.removeItem("token");
            	this.$router.push({name:"login"});
			}
		},
		watch:{ 
			"$route":function(to,from){
				if(to.meta.title!="underfind"){
					this.activeTitle = to.meta.title;
				}
				if(to.name == "login"){ 
					this.isShowNav = false; 
				}else{ this.isShowNav = true; 
				} 
			}
		}
		
	}
</script>

<style lang="scss">
@import url("https://at.alicdn.com/t/font_1157336_vspvpugzbmk.css");
html,body{
	width: 100%;
  	height: 100%!important;
}
#app {
  	width: 100%;
  	height: 100%;
	overflow: hidden;
  	.appBox{
  		.iconfont{
  			font-size: 16px;
  			padding-right: 20px;
  		}
  		i{
  			color: #fff;
  		}
  		.is-active>i{
  			color: rgb(255, 208, 75);
  		}
  	}
}
.el-header { 
	background-color: #fff; 
	color: #333; 
	line-height: 50px; 
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
} 
.el-aside { 
	color: #333; 
}
.outLogin{
	font-size: 16px;
	color: #848a8c;
	float: right;
	cursor: pointer;
	
}
.outLogin:hover{
	color: skyblue;
}
.showMenu{
	float: left;
	margin-right: 20px;
	color: #001200;
	cursor: pointer;
	i{
		font-size: 20px;
	}
}
.showMenu:hover{
	color: skyblue;
}
.el-menu--collapse{
    width: 56px!important;
}
.el-menu-vertical-demo{
	height: 100%;
}

.el-menu{
	border: none!important;
}
.el-aside{
	overflow: hidden!important;
}
.transCjj-enter-active, .transCjj-leave-avtive {
    transition: all 1s
}
.transCjj-enter,.transCjj-leave-to {
    transform: translate3d(100%,0,0);
}
aside{
	transition: 0.4s;
}
.el-container{
	overflow:auto;
}

</style>
